<template>
    <div>
        <Editor class="editor" v-model="content" :init="editorInit" />
    </div>
</template>

<style lang="scss"></style>
<style lang="scss" scoped>
.editor {
    width: 100%;
}
</style>

<script>
import Editor from "@tinymce/tinymce-vue";
import axios from "axios";
import tinymce from "tinymce/tinymce";
import "tinymce/models/dom";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/plugins/advlist"; 
import "tinymce/plugins/anchor"; 
import "tinymce/plugins/autolink"; 
import "tinymce/plugins/autoresize"; 
import "tinymce/plugins/charmap"; 
import "tinymce/plugins/code"; 
import "tinymce/plugins/codesample"; 
import "tinymce/plugins/directionality"; 
import "tinymce/plugins/fullscreen"; 
import "tinymce/plugins/image"; 
import "tinymce/plugins/insertdatetime"; 
import "tinymce/plugins/link"; 
import "tinymce/plugins/lists"; 
import "tinymce/plugins/media"; 
import "tinymce/plugins/nonbreaking"; 
import "tinymce/plugins/pagebreak"; 
import "tinymce/plugins/preview"; 
import "tinymce/plugins/searchreplace"; 
import "tinymce/plugins/table"; 
import "tinymce/plugins/visualblocks"; 
import "tinymce/plugins/visualchars"; 
import "tinymce/plugins/wordcount"; 
import "tinymce/plugins/emoticons";
export default {
    name: "TEditor",
    components: { Editor },
    props: {
        value: {
            default: ''
        }
    },
    data() {
        return {
            content: "",
            editorInit: {
                language_url: "/tinymce/langs/zh-Hans.js",
                language: "zh-Hans",
                skin_url: "/tinymce/skins/ui/oxide",
                content_css: "/tinymce/skins/content/default/content.css",
                emoticons_database_url: '/tinymce/emoji/emojis.js',
                plugins: [
                    "searchreplace",
                    "autolink",
                    "directionality",
                    "visualblocks",
                    "visualchars",
                    "fullscreen",
                    "autoresize",
                    "image",
                    "link",
                    "media",
                    "code",
                    "codesample",
                    "table",
                    "charmap",
                    "pagebreak",
                    "nonbreaking",
                    "anchor",
                    "insertdatetime",
                    "advlist",
                    "lists",
                    "wordcount",
                    "preview",
                    "emoticons"
                ],
                toolbar:
                    "undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl",
                toolbar_sticky: true,
                image_advtab: true,
                image_caption: true,
                toolbar_mode: "wrap",
                contextmenu: "forecolor fontsize link image table",
                font_size_formats: "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px",
                font_family_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
                line_height_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5",
                branding: false,
                resize: false,
                elementpath: true,
                content_style: "img {max-width:100%;}",
                paste_data_images: true,
                images_upload_handler: (blobInfo, progress) =>
                    new Promise((resolve, reject) => {
                        const blob = blobInfo.blob();
                        const data = new FormData();
                        data.append("image", blob);
                        data.append("token", $A.getToken());

                        
                        axios
                            .post($A.apiUrl("system/imgupload"), data, {
                                headers: {
                                    "Content-Type": "multipart/form-data",
                                },
                                onUploadProgress: (progressEvent) => {
                                    
                                    progress(
                                        (progressEvent.loaded /
                                            progressEvent.total) *
                                            100
                                    );
                                },
                            })
                            .then((res) => {
                                resolve(res.data.data.url);
                            })
                            .catch((error) => {
                                reject("上传失败，原因：" + error.toString());
                            });
                    }),
                file_picker_callback: (callback, value, meta) => {
                    let filetype, url, filename;
                    switch (meta.filetype) {
                        case "image":
                            filetype = ".jpg, .jpeg, .png, .gif"
                            url = $A.apiUrl("system/imgupload")
                            filename = 'image'
                            break;
                        case "media":
                            filetype = ".mp3, .mp4, .mov, .avi"
                        case "file":
                            url = $A.apiUrl("system/fileupload")
                            filename = 'files'
                        default:
                    }
                    const input = document.createElement("input");
                    input.setAttribute("type", "file");
                    input.setAttribute('accept', filetype);
                    input.click();
                    input.onchange = (ev) => {
                        const file = ev.target.files[0]
                        const data = new FormData();
                        data.append(filename, file, file.name);
                        data.append("token", $A.getToken());

                        
                        axios
                            .post(url, data, {
                                headers: {
                                    "Content-Type": "multipart/form-data",
                                }
                            })
                            .then((res) => {
                                const data = res.data.data
                                callback(data.url, { title: `${data.name}(${data.size}KB)`})
                            })
                            .catch((error) => {
                                console.error("上传失败，原因：" + error.toString());
                            });
                    };
                },
            },
        };
    },
    mounted() {
        this.content = this.value;
    },
    watch: {
        content(newValue) {
            this.$emit('input', newValue);
        },
        value(newValue) {
            console.log(newValue)
            if (newValue === this.content) {
                return;
            }
            this.content = this.value;
        },
    }
};
</script>
